<template>
  <div className="content">
    <div id="module2" style="width: 100%;height: 90vh;"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import zhongguo from "@/assets/mapJson/data-city.json";
import { getMap } from "../utils/maputils";

export default {
  name: "BillboardRealTimeTransportation",
  data(){
    return{
      mapCityOrderWeightData:[],
    }
  },
  created() {
    this.getMapOptions();
    this.$nextTick(() => {
      this.getMap();
    })
  },
  methods: {
    getMap() {
      let module2 = echarts.init(document.getElementById('module2'))
      const option = {
        // 背景颜色
        backgroundColor: "#ffffff",
        // 提示浮窗样式
        tooltip: {
          show: true,
          trigger: "item",
          alwaysShowContent: false,
          backgroundColor: "#005562",
          borderColor: "rgba(0, 0, 0, 0.16);",
          hideDelay: 100,
          triggerOn: "mousemove",
          enterable: true,
          textStyle: {
            color: "#DADADA",
            fontSize: "15",
            width: 20,
            height: 30,
            overflow: "break",
          },
          showDelay: 100
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            symbol: "pin",
            legendHoverLink: true,
            symbolSize: [60, 60],
            // 这里渲染标志里的内容以及样式
            label: {
              show: true,
              formatter(value) {
                return value.name;
              },
              color: "#fff",
            },
            // 标志的样式
            itemStyle: {
              normal: {
                color: "rgba(255,0,0,.7)",
                shadowBlur: 2,
                shadowColor: "rgba(255,0,0,.7)",
              },
            },
            tooltip: {
              // ...
              formatter(params) {
                return `地区：${params.name}</br>单量：${params.value[3]}单</br>货量：${params.value[2]/1000}t`;
              }
            },
            // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
            // 至于如何展示，完全是靠上面的formatter来自己定义的
            data:this.mapCityOrderWeightData,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            zlevel: 1,
          },
        ],
        // 地图配置
        geo: {
          map: "china",
          roam:true,
          zoom:1.2,
          label: {
            // 通常状态下的样式
            normal: {
              show: true,
              textStyle: {
                color: "#757575",
              },
            },
            // 鼠标放上去的样式
            emphasis: {
              textStyle: {
                color: "#fff",
              },
            },
          },
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              borderColor: "#209e91",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "#209e91",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: "#209e91",
              borderWidth: 0,
            },
          },
        },
        graphic: [
          {
            type: "text",
            left: "15%",
            top: "10%",
            style: {
              text: "中国",
              font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
              fill: "#209e91",
            },
          },
        ],
      };
      // 防止graph里频繁添加click事件，在添加click事件之前先全部清空掉。
      module2.off()
      module2.on("click", ({name}) => {
        // 如果option.graphic里已经有了城市名称，则不进行任何操作，防止频繁点击
        const index = option.graphic.findIndex(i => i.style.text === name);
        if (!name || index !== -1) return
        const [mapName, mapJson] = getMap(name);
        option.geo.zoom = 0.8;
        option.geo.map = mapName;
        // 为了重新定位，这里使用了length
        const idx = option.graphic.length + 1;
        option.graphic.push({
          type: "text",
          left: `${idx * 10}%`,
          top: "10%",
          style: {
            text: name,
            font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
            fill: "#209e91",
          },
          onclick: () => {
            // 利用函数的作用域，可以直接拿上面的name来用
            const [grahpName, graphJson] = getMap(name);
            const index = option.graphic.findIndex(i => i.style.text === name);
            // 点击元素之后的所有元素全部删除
            option.graphic.splice(index + 1);
            option.geo.map = mapName;
            echarts.registerMap(grahpName, graphJson);
            module2.setOption(option, true);
          },
        });
        echarts.registerMap(mapName, mapJson);
        module2.setOption(option, true);
      });
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      echarts.registerMap("china", zhongguo)
      module2.showLoading();
      setTimeout(() => {
        module2.setOption(option);
        module2.hideLoading();
      },2500)
    },
    getMapOptions(){
      this.$axios({
        url: 'order/form/getCityOrderWeight',
        method: 'post',
      }).then(res => {
        if (res.data.success) {
          for(let i=0;i<res.data.object.length;i++){
            let city = res.data.object[i].consignorCity;
            if(city != null){
              let mapCityInfo = {};
              mapCityInfo.name = city.cityName;
              mapCityInfo.value =[];
              mapCityInfo.value.push(city.longitude);
              mapCityInfo.value.push(city.latitude);
              mapCityInfo.value.push(res.data.object[i].weight);
              mapCityInfo.value.push(res.data.object[i].orderBackupOne);
              this.mapCityOrderWeightData.push(mapCityInfo)
            }
          }
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    }
  },
};
</script>



